<!-- 好友拼单 -->
<template>
  <view v-if="shenheStatus == 0" class="spell-page">
    <spellAll
      :shareId="startManId"
      :dataList="cartSelectData"
      :userId="user_id"
      :totalPrice="cartTotalPrice"
      :md_name="orderMealMdName"
      :flag_id="routeData.flag_id"
      @shareSpellEnd="shareSpellEnd"
      @stopSpell="stopSpell"
      @confirmSubmit="confirmSubmit"
      @userHandleComfirm="userHandleComfirm"
      v-if="!shareSpelled"
    ></spellAll>
    <spellUserEnd
      v-if="shareSpelled && routeData.shareId != user_id"
      :shareId="startManId"
      :dataList="cartSelectData"
    ></spellUserEnd>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import { orderMealMixin } from '../mixins/index';
import spellAll from './components/spellAll.vue';
import spellUserEnd from './components/spellUserEnd.vue';

export default {
  components: {
    spellAll,
    spellUserEnd,
    Shenhe,
  },
  data() {
    return {
      canSubmit: true,
      isInitiator: false, // 是否是发起人
      showConfirmModal: false,
      routeData: {},
      shareSpelled: false, // 拼单是否已提交
    };
  },
  mixins: [orderMealMixin], //混入文件
  filters: {},
  computed: {},
  onLoad(t) {
    let md = uni.getStorageSync('storeMdData');
    if (md) {
      md = JSON.parse(md);
      this.storageMdId = md.id;
    }
    if (t?.shareId) {
      this.routeData = t;
      if (t.shareId == this.user_id) {
        this.isInitiator = true;
      }
    }
  },
  onHide() {
    this.clearIntervalPoll = true;
  },
  onUnload() {
    clearInterval(this.intervalPoll);
  },
  onShow() {
    this.checkUserEnded();
    clearInterval(this.intervalPoll);
    // 页面显示时，重新开始轮询
    this.pollingCartData();
    this.clearIntervalPoll = false;
    this.startPolling();
  },
  onShareAppMessage() {
		const storeId = uni.getStorageSync("store_id");
    let path = `/alipay-order/orderMeal/orderMeal?store_id=${storeId}`;
    if (this.storeTableNum) {
      path = `/alipay-order/orderMeal/orderMeal?food_table_num=${this.storeTableNum}&shareId=${this.routeData.shareId}&store_id=${storeId}`;
    } else {
      if (this.routeData.flag_id) {
        path = `/alipay-order/orderMeal/orderMeal?flag_id=${this.routeData.flag_id}&shareId=${this.routeData.shareId}&md_id=${this.storageMdId}&store_id=${storeId}`;
      }
    }


    return {
      title: '喊你一起点餐～',
      path: path,
      imageUrl: this.stores.store_share_logo,
      desc: this.stores.store_share_desc,
      success(res) {
        uni.showToast({
          title: this.$t('home.success'),
        });
      },
      fail(res) {
        uni.showToast({
          title: this.$t('home.fail'),
          icon: 'none',
        });
      },
    };
  },
  methods: {
    checkUserEnded() {
      if (this.user_id == this.routeData.shareId) return;
      this.checkUserSpellStatus(this.routeData.flag_id, res => {
        if (res.status == 1) {
          // 选好了
          this.shareSpelled = true;
        }
      });
    },
    // 开始轮询数据
    startPolling() {
      setTimeout(() => {
        this.intervalPollingCartData();
      }, 3000);
    },
    // 继续提交
    confirmSubmit() {
      let mch_info = {
        mch_id: 0,
        goods_list: [],
      };
      let arr = [];
      this.cartSelectData.forEach(d => {
        d.goods_list.forEach(k => {
          let item = {};
          item['food_cart_id'] = k.cart_id;
          arr.push(item);
        });
      });
      mch_info.goods_list = arr;
      let params = {
        mch_list: JSON.stringify([mch_info]),
        flag_id: this.routeData.flag_id,
      };
      this.$utils.toUrl(
        `/alipay-order/order/order?order_info=${JSON.stringify(params)}`,
        'redirectTo'
      );
    },
    shareSpellEnd() {
      this.shareSpelled = true;
    },
    userHandleComfirm() {
      this.shareSpelled = true;
    },
    // 点击提交按钮
    handleSubmit() {
      if (!this.canSubmit) return;
      if (this.routeData) {
        if (this.routeData.shareId != this.user_id) {
          // 别人分享的拼单
          this.shareSpelled = true;
          return;
        }
      }
      this.showConfirmModal = true;
    },
    stopSpell() {
      this.stopSpellOrderMeal(this.routeData.flag_id, () => {
        uni.showToast({
          title: '关闭拼单成功！',
          icon: 'none',
        });

        setTimeout(() => {
          uni.navigateBack();
        //   this.$utils.toUrl(`/alipay-order/orderMeal/orderMeal`, 'redirectTo');
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.spell-order {
  width: 100%;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
  .header-share {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rpx 0 30rpx 0;
    .title {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f0250e;
    }
    .share-btn {
      width: 200rpx;
      height: 70rpx;
      background: #f0250e;
      border-radius: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 30rpx;
    }
  }
  .spell-end {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rpx 0 30rpx 0;
    .title {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f0250e;
    }
    .summary-title {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
      margin-top: 26rpx;
    }
  }
  .order-section {
    width: 100%;
    background: #ffffff;
    padding-top: 30rpx;
    margin-bottom: 24rpx;
    .md-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      .md-name {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .order-spell {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
    .user-order-list {
      width: 100%;
      padding-top: 30rpx;

      .user-order-item {
        width: 100%;
        padding: 0 24rpx 30rpx 24rpx;
        .item-top-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .user-info {
            display: flex;
            align-items: center;
            image {
              width: 34rpx;
              height: 34rpx;
              background: #ffdfdb;
              border-radius: 17rpx;
              margin-right: 6rpx;
            }
            text {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
            }
          }
          .user-operate {
            display: flex;
            align-items: center;
            text {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              margin-left: 30rpx;
            }
          }
        }
        .user-goods-list {
          width: 100%;
          .user-goods-item {
            width: 100%;
            display: flex;
            align-items: flex-start;
            padding: 24rpx 0;
            border-bottom: 1px solid #f8f8f8;
            .goods-img {
              width: 166rpx;
              height: 166rpx;
              background: #f2f2f2;
              border-radius: 10rpx;
              flex-shrink: 0;
            }
            .godos-info {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-left: 20rpx;
              .info-detail {
                flex: 1;
                .goods-name {
                  font-size: 28rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #262626;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  max-width: 464rpx;
                }
                .sku-info {
                  font-size: 24rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #8c8c8c;
                  margin-top: 10rpx;
                  max-width: 163px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
                  overflow: hidden;
                }
                .price {
                  font-size: 32rpx;
                  font-family: PingFang SC;
                  font-weight: 600;
                  color: #262626;
                  margin-top: 14rpx;
                }
              }
              .info-num {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
              }
            }
          }
          .user-goods-item:last-child {
            padding-bottom: 0;
            border-bottom: 0 none;
          }
        }
      }
    }
    .no-order-view {
      width: 100%;
      padding: 30rpx 24rpx;
      .user-info {
        display: flex;
        align-items: center;
        image {
          width: 34rpx;
          height: 34rpx;
          background: #ffdfdb;
          border-radius: 17rpx;
          margin-right: 6rpx;
        }
        text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
      .to-add-text {
        display: flex;
        align-items: center;
        margin-top: 24rpx;
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f0250e;
        }
      }
    }
    .close-spell {
      width: 93.6%;
      height: 80rpx;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #f1f1f1;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
    }
  }
  .foot-section {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
    background-color: #ffffff;
    .foot-content {
      width: 100%;
      height: 112rpx;
      background: #ffffff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 24rpx;
      .submit-btn {
        width: 224rpx;
        height: 80rpx;
        background: #8c8c8c;
        border-radius: 112rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #fffefe;
        margin-left: 14rpx;
      }
      .can-submit {
        background: #f0250e;
      }
      .total-price {
        display: flex;
        align-items: baseline;
        color: #f0250e;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #f0250e;
        text:nth-child(3) {
          font-size: 40rpx;
        }
      }
    }
    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  .modal-section {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 111;
    .modal-bg {
      width: 100%;
      height: 100%;
      background-color: #000000;
      opacity: 0.5;
    }
    .modal-content {
      width: 80vw;
      background: #ffffff;
      border-radius: 24rpx;
      position: absolute;
      left: 10vw;
      top: 30vh;
      z-index: 111;
      padding-top: 24rpx;
      .modal-title {
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .modal-msg {
        width: 66.67vw;
        margin: 46rpx auto 0;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #262626;
      }
      .modal-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 74rpx;
        padding-bottom: 50rpx;
        .cancel-btn {
          width: 230rpx;
          height: 76rpx;
          background: #ffffff;
          border: 1px solid #999999;
          border-radius: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .confirm-btn {
          width: 230rpx;
          height: 76rpx;
          background: #f0250e;
          border-radius: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-left: 40rpx;
        }
      }
    }
  }
}
</style>
